<!--
 @description PopSelect
 @fileName index.vue
 @author zengqiongying
 @created 2022/10/30 14:29:48
-->
<template>
  <Popup
    v-model="popShow"
    position="bottom"
    :title="title"
    :clear="clear"
    :show-cancel-button="false"
    @confirm="handleSubmit"
    @clear="handleClear"
  >
    <div class="select-list" :style="heightStyle">
      <Scroll vertical height="100%">
        <div v-for="(item,i) in list" :key="i" class="option" @click="handleClick(item)">
          <span class="name">{{ labelSet(item) }}</span>
          <span class="icon" :class="{'checked':selVal.includes(item[valueName].toString())}" />
        </div>
      </Scroll>
    </div>
  </Popup>
</template>

<script>
import Popup from '@/components/Popup'
import Scroll from '@/components/Scroll'
export default {
  name: 'PopSelect',
  components: { Popup, Scroll },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: () => []
    },
    value: {
      type: [String, Number, Array],
      default: ''
    }, // 选中的值
    label: {
      type: String,
      default: ''
    }, // 选中的值的名称
    valueName: {
      // 选项值键名
      type: String,
      default: 'id'
    },
    labelName: {
      // 选项名称键名
      type: String,
      default: ''
    },
    labelFunc: {
      // 选项名称自定义回调方法
      type: Function,
      default: null
    },
    height: {
      type: [Number, String],
      default: ''
    },
    multiple: {
      // 是否多选
      type: Boolean,
      default: false
    },
    clear: {
      // 是否允许清空
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selVal: []
    }
  },

  computed: {
    popShow: {
      set(val) {
        this.$emit('update:show', val)
      },
      get(val) {
        return this.show
      }
    },
    heightStyle() {
      const style = {}
      if (this.height) {
        style.height = typeof this.height === 'number' ? `${this.height}px` : this.height
      }
      return style
    }
  },
  watch: {
    value: {
      handler(val) {
        this.selVal = []
        if (this.multiple) {
          if (val && val instanceof Array) {
            val.forEach(e => {
              if (!(e === null || e === undefined || e === '')) {
                this.selVal.push(e.toString())
              }
            })
          }
        } else {
          if (!(val === null || val === undefined || val === '')) {
            this.selVal.push(val.toString())
          }
        }
        const names = []
        if (this.selVal && this.selVal.length > 0) {
          this.list.forEach(v => {
            const val = v[this.valueName].toString()
            if (this.selVal.includes(val)) {
              names.push(v[this.labelName])
            }
          })
        }
        this.$emit('update:label', names.join(','))
      },
      deep: true,
      immediate: true
    }
  },
  created() {

  },
  methods: {
    handleClick(data) {
      const val = data[this.valueName].toString()
      if (!this.multiple) {
        this.selVal = [val]
        return
      }
      const index = this.selVal.findIndex(v => v === val)
      if (index === -1) {
        this.selVal.push(val)
      } else {
        this.selVal.splice(index, 1)
      }
    },
    handleSubmit() {
      if (!this.selVal || this.selVal.length === 0) {
        this.$toast('请选择')
        return
      }
      const selArr = this.list.filter(v => {
        const val = v[this.valueName].toString()
        return this.selVal.includes(val)
      })
      const names = selArr.map(v => {
        return v[this.labelName]
      })
      this.$emit('input', this.selVal)
      this.$emit('update:label', names.join(','))
      this.$emit('selectChange', this.multiple ? selArr : selArr[0])
      this.popShow = false
    },
    handleClear() {
      this.selVal = []
      this.$emit('input', this.multiple ? [] : '')
      this.$emit('update:label', '')
      this.$emit('selectChange', '')
      this.popShow = false
    },
    labelSet(item) {
      if (this.labelFunc && this.labelFunc instanceof Function) {
        return this.labelFunc(item)
      } else {
        return item[this.labelName]
      }
    }
  }
}

</script>
<style lang='less' scoped>
.select-list{
  padding:0 16px;
  border-radius: 8px;
  background: rgba(239, 242, 247, .6);
  overflow: hidden;
  max-height: 40vh;
  .option{
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    &:last-child{
      border-bottom: 0;
    }
  }
  .name{
    font-size: 17px;
    color: #3C4458;
  }
  .icon{
    width: 20px;
    height: 14px;
    margin-left: 10px;
    &.checked{
      background: url(~@/assets/icon-yes.png);
      background-size: 20px 14px;
    }
  }
}
</style>
